<template>
    <el-cascader :options="dataSource" :load-data="loadData" :render-format="formatDisplay" change-on-select v-model="currentValue"  transfer clearable></el-cascader>
</template>
<script>
import axios from 'axios';
import Qs from 'qs';
import Vue from 'vue';
export default {
    name: 'cascaderplus',
    components: {

    },
    props: {
        value: {
            type: Array,
            default () {
                return [];
            }
        },
        oldValue: {
            type: Array,
            default () {
                return [];
            }
        },
        url: { /*数据源链接*/
            type: String,
            default () {
                return "";
            }
        },
        dict: {
            type: Object,
            default () {
                return {};
            }
        }
    },
    watch: {
        currentValue() {
            /* 下面代码不能使用，因为如果编辑了currentValue，则这个方法将循环递归调用
            let finalValue = this.currentValue;
            if(this.leafValue && finalValue.length > 0) {
                finalValue = finalValue[finalValue.length - 1];
            }*/
            this.$emit('input', this.currentValue);
        },
        value: {
            handler: function(val, oldval) {
                this.currentValue = val;
            },
            deep: true,
            immediate: true
        },
        oldValue: {
            handler: function(val, oldval) {
                this.oldValue = val;
                this.loadData();
            },
            immediate: true
        },
    },
    data() {
        return {
            currentValue: [],
            dataSource: []
        }
    },
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.loadData();
        });
    },
    beforeDestroy() {

    },
    methods: {
        loadData(item, callback) {
            /*如果没有item，则默认parentId为0*/
            let parentId = (!item || item.value === undefined) ? 0 : item.value;
            if (item) {
                item.loading = true;
            }

            let id = "";
            const index = this.oldValue.length - 1;
            if (index !== -1) {
                id = this.oldValue[index] + ""; /* 此id是所选择案由的parentId */
            }

            Vue.axios.get(this.url, {
                    params: { id: id, parent_id: parentId }
                })
                .then(response => {
                    let res = response.data;

                    if (!item) {
                        this.dataSource = res.data.map((it) => {
                            let json = {
                                value: it.value,
                                label: it.label
                            }

                            if (!it.leaf) {
                                json.children = [];
                                json.loading = false;
                            }
                            return json;
                        })
                        return;
                    }

                    item.loading = false;
                    item.children = res.data.map((it) => {
                        let json = {
                            value: it.value,
                            label: it.label
                        }

                        if (!it.leaf) {
                            json.children = [];
                            json.loading = false;
                        }
                        return json;
                    })

                    if (typeof callback == 'function') {
                        callback();
                    }
                })
                .catch(err => {
                    console.log(" handleSearch err %s", err);
                    this.options = [];
                })
        },
        formatDisplay(labels, selectedData) {
            console.log("labels: %s, selectedData: %s", JSON.stringify(labels), JSON.stringify(selectedData));
            const index = labels.length - 1;
            if (index !== -1) {
                return labels[index];
            }

            if(this.value.length > 0) {
                let id = this.value[this.value.length - 1];
                return this.dict[id]; 
            }

            return "";
        }
    }
}
</script>
<style>
</style>